<template>
    <div class="customer" style="padding: 40px 20px 40px 0">

		<div style="width: 85%;">
			<el-row style="margin-bottom: 20px;">
			    <el-col :span="24">              
			        <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="80px">
			            <el-button
			                type="primary"
			                @click="add()">+添加
			             </el-button>
			        </el-form>
			    </el-col>
			</el-row>
			
			<el-table
			        :data="pageInfo.dtos"
			        v-loading="table_loading"
			        @sort-change='order'
			        element-table_loading-text="加载中"
			        style="width: 100%">
			    <el-table-column
			            prop="cateName"
			            label="名称">
			    </el-table-column> 
			    <el-table-column
			            label="排序值">
			            <template scope="scope">
			                <el-input  v-model="scope.row.cateSort" style="width: 100px;"  @blur="editOrder(scope.row,$event)" @focus="setOldProbability(scope.row)"></el-input>
			            </template>
			    </el-table-column>
			    <el-table-column
			            label="二级分类">
			            <template scope="scope">
			                <span style="color: #128BE5;text-decoration: underline;cursor: pointer;" @click="second(scope.row)">二级分类</span>
			            </template>
			    </el-table-column>
			    <el-table-column
			            prop="upd_Time"
			            sortable='custom'
			            label="最后编辑时间">
			            <template scope="scope">
			                <span>{{ scope.row.updTime }}</span>
			            </template>
			    </el-table-column>
			    <el-table-column label="操作" width="250">
			        <template scope="scope">
			            <el-button
			                    size="small"
			                    type="primary"
			                    @click="detail(scope.row)">编辑
			            </el-button>
			             <el-button type="danger" size="small"
			                       @click="handleDelete(scope.row)">删除
			            </el-button>
			        </template>
			    </el-table-column>
			</el-table>
			<div class="paginate">
			    <el-pagination
			            @current-change="handleCurrentChange"
			            :current-page="pageInfo.pageNum"
			            :page-size="pageInfo.pageSize"
			            layout="total, prev, pager, next, jumper"
			            :total="pageInfo.count">
			    </el-pagination>
			</div>
			
			
		</div>
		<!--  -->
		<div class="tan_bg" v-show="dialogVisible">
		</div>
		<div  v-show="dialogVisible" style="z-index:2; padding: 20px;border: 1px solid #CCCCCC;background: white;height: 240px;width:30%;position: fixed;top: 30%;left: 35%;">
				<div style="display: flex;justify-content: space-between;">
				<div>新增/编辑商品分类</div>
				<i @click="del_tankuang" class="el-icon-close"></i>
				</div>
			<div class="row" style="margin-top: 50px;">
			<div>商品分类</div>
			 <el-input auto-complete="off"  v-model="form.cateName" style="width: 70%;margin-left: 10px;" :maxlength="50"></el-input>
			 </div>
			 <div style="text-align: center;margin-top: 30px;">
			     <el-button type="primary" @click="onSubmit()" :disabled="!form.cateName" :loading="loading">保 存
			     </el-button>
			 </div>
			</div>
			
		 <!--  -->
        <!-- <el-dialog title="新增/编辑商品分类" v-show="dialogVisible" >
		
             <el-form :model="form" style="background-color: #FFFFFF;padding-top: 20px;">
                <el-form-item label="商品分类：" label-width="100px">
                    <el-input auto-complete="off"  v-model="form.cateName" style="width: 80%;" :maxlength="50"></el-input>
                </el-form-item>
             </el-form>
             <div style="text-align: center">
                 <el-button type="primary" @click="onSubmit()" :disabled="!form.cateName" :loading="loading">保 存
                 </el-button>
             </div>
            
        </el-dialog> -->
		 
    </div>
</template>
<style>

</style>
<script>
    export default {
        data() {
            return {
                formInline: {
                    pageNum:1,
                    sort:'CATE_SORT',
                    desc:'DESC',
                    pageSize:10,
                    cateParentId:0,
                    storeId:'',
                    cateState:'1',
                    cateType:'1'
                },
                pageInfo: {
                    pageNum: 1,
                    pageSize: 10,
                    count: 1,
                    dtos: []
                },
                dialogVisible:false,
                table_loading:false,
                form: {
                  cateId:'',
                  cateName:'',
                  storeId:'',
                  cateParentId:0,
                  cateType:'1',
                  cateState:'1',
                  cateShow:'1',
                  cateSort:'0'
                },
                URL:URL,
                loading:false,
                storeId:''
            }
        },
        created(){
            this.fetchData(this.pageInfo.pageNum);
        },
       
        methods: {
            fetchData (page=1) {
                this.table_loading = true;
                this.pageInfo.pageNum = page
                this.formInline.pageNum = this.pageInfo.pageNum
                this.dataApi.ajax('selectPageGoodCate',this.formInline, res => {
                    this.table_loading = false;
                    if (res.responseType === 'S') {
                       this.pageInfo = res
					   // console.log(this.pageInfo,'pageInfo')
                    }
                });

            },
            add(){
               this.dialogVisible=true
               this.form={
                  cateName:'',
                  storeId:this.storeId,
                  cateParentId:0,
                  cateType:'1',
                  cateState:'1',
                  cateShow:'1',
                  cateSort:'0'
               }
            },
			del_tankuang(){
				 this.dialogVisible=false
			},
            onSubmit() {
              let obj=generateObj(this.form)
              this.loading=true
              if (obj.cateId) {
                    this.dataApi.ajax('editGoodCate',obj, res => {
                    if (res.responseType === 'S') {
                      this.showMsg('修改成功')
                      this.loading=false
                      this.dialogVisible=false
                      this.fetchData(this.pageInfo.pageNum)
                    }
                });
              }else{
                 this.dataApi.ajax('addGoodCate',obj, res => {
                    if (res.responseType === 'S') {
                      this.showMsg('添加成功')
                      this.loading=false
                      this.dialogVisible=false
                      this.fetchData(this.pageInfo.pageNum)
                    }
                });
              }
              
            },
            editOrder(item){
               if (Math.floor(item.cateSort) <= 0) {
                    item.cateSort = item.OldProbability || 0;
                    return false;
                }
                if (item.OldProbability == item.cateSort) return false;
                if (!isNumber(item.cateSort)) {
                   this.showMsg('只能输入数字','warning')
                   item.cateSort=item.OldProbability
                   return false;
                }
                // if (item.sortValue > this.pageInfo.totalRows){
                //    this.showMsg('排序值不能大于总数','warning')
                //    item.sortValue=item.OldProbability
                //    return false;
                // }

                 var data={
                  cateId:item.cateId,
                  cateSort:item.cateSort
                 }
                 this.dataApi.ajax('editGoodCate',data, res => {
                        if (res.responseType === 'S') {
                           this.showMsg('修改成功')
                           this.fetchData(this.pageInfo.pageNum)
                        }
                  });
            },
            detail(item){
               this.dialogVisible=true
               this.form={
                  cateId:item.cateId,
                  cateName:item.cateName
                }
            },         
            handleCurrentChange(val) {
                this.fetchData(val)
            },
            order(column){
               if (!column.order) {
                    return;
                }
                if (column.order=='ascending') {
                     this.formInline.desc='ASC'
                }else{
                    this.formInline.desc='DESC'
                } 
               this.fetchData(this.pageInfo.pageNum)
            },
            handleDelete(item){

                 this.$confirm('确认删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                  }).then(() => {
                    this.dataApi.ajax('editGoodCate',{cateId:item.cateId,cateState:2}, res => {
                          if (res.responseType === 'S') {
                              this.showMsg('删除成功')
                              this.fetchData(this.pageInfo.pageNum)
                          }
                      });
                  }).catch(() => {
                            
                  });
            },
            second(item){
                this.$router.push('/mall/second_list?cateParentId='+item.cateId+'&&name='+item.cateName)
            },
            setOldProbability(item) {
               item.OldProbability = item.cateSort
            },
        }
    }
</script>
